<template>
    <div className="user_box">
        <Card>
            <p slot="title">链接管理</p>
            <div slot="extra">
                <Button type="primary" size="small" @click="addURL()">添加链接</Button>
            </div>
            <Table :data="list" :columns="columns" />
            <Page :current="page" :style="pageStyle" @on-change="changePage" :page-size="10" :total="total"></Page>
        </Card>
        <Modal
            :closable="true"
            v-model="showModal"
            :title="currentTitle" 
            @on-ok="updateURL" 
            :mask-closable="false">
            <Form :model="currentData" :label-width="100">
                <FormItem label="选择类型">
                    <Select v-model="currentData.currentType" style="width:300px">
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="链接">
                    <Input v-model="currentData.currentURL" placeholder="请输入链接" style="width: 300px" />
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>

export default {
  name: 'link_manage',
  data () {
    return {
        currentData: {
            id:"",
            currentType: "",
            currentURL: ""
        },
        type:"update",
        showModal: false,
        currentType:"",
        total: 0,
        page: 1,
        list: [],
        currentTitle:"添加链接",
        currentImage: "",
        typeList:[{
            value: '关于我们',
            label: '关于我们'
        },{
            value: '联系我们',
            label: '联系我们'
        }],
        columns: [{
            title: '类型',
            width: 200,
            align: 'center',
            render: (h, params) => {
                return h('div', params.row.type)
            }
        },{
            title: '链接',
            width: 300,
            align: 'center',
            render: (h, params) => {
                return h('div', params.row.url);
            }
        },{
            title: '操作',
            key: 'view',
            width: 200,
            fixed: 'right',
            align: 'center',
            render: (h, params) =>{
                let bar = [];
                bar.push(h('Button',{
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    style: {
                        marginRight: "10px"
                    },
                    on: {
                        click: () => {
                            this.currentTitle = "修改链接"
                            this.showModal = true;
                            this.currentData = {
                                id: params.row.id,
                                currentType:params.row.type,
                                currentURL: params.row.url
                            }
                        }
                    }
                }, "修改"));
                bar.push(h('Button',{
                    props: {
                        type: 'error',
                        size: 'small'
                    },
                    style: {
                        marginRight: "10px"
                    },
                    on: {
                        click: () => {
                            this.$Modal.confirm({
                                title: '确定删除?',
                                onOk: () => {
                                    this.jsonrpc.blind.admin.updateURL({
                                        "id": params.row.id,
                                        "is_removed": true
                                    }).then(()=>{
                                        this.changePage(this.page)
                                    })
                                }
                            })
                        }
                    }
                }, "删除"));
                return h('div', bar);
            }
        }],
        pageStyle: {
            marginTop: '15px'
        }
    }
  },
  methods: {
    changePage(page) {
      this.jsonrpc.blind.admin.getfindURLs({ start: (page - 1) * 10, limit: 10 }).then(res=> {
            this.list = res.list;
            this.total = res.total;
            this.page = page;
      })
    },
    addURL() {
        this.currentTitle = "添加链接"
        this.showModal = true;
        this.currentType = "";
        this.currentURL = ""
    },
    updateURL() {
        this.jsonrpc.blind.admin.updateURL({
            "id": this.currentData.id,
            "currentType":this.currentData.currentType,
            "currentURL":this.currentData.currentURL
        }).then(()=>{
            this.changePage(this.page)
        })
    }
  },
  mounted() {
    this.changePage(1)
  }
}
</script>
<style>
    .show_view_modal .ivu-modal-footer{
        display: none;
    }
</style>